<template>
    <div class="chart">
        <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>		
    </div>
</template>
<script>
import Schart from 'vue-schart';
	export default {
		data() {
			return {
				canvasId: 'myCanvas1',
				type: 'line',
				form:{ date1:'',date2:''},
				data: [
					{name: '2011', value: 300},
					{name: '2012', value: 450},
					{name: '2013', value: 550},
					{name: '2014', value: 660},
					{name: '2015', value: 750},
					{name: '2016', value: 850},
					{name: '2017', value: 900},
				],
				options:{
						autoWidth: true,                // 设置宽高自适应
						showValue: true,               // 是否在图表中显示数值
						topPadding: 30,                 // canvas 上边距
						bottomPadding: 40,              // canvas 下边距
						leftPadding: 70,                // canvas 左边距
						rightPadding: 70,                // canvas 右边距
						yEqual: 5,                      // y轴分成4等分
						bgColor: '#ffffff',             // 默认背景颜色
						fillColor: '#1eddc8',           // 默认填充颜色
						axisColor: '#666666',           // 坐标轴颜色
						contentColor: '#eeeeee',        // 内容横线颜色
						title: '',                      // 图表标题
						titleColor: '#000000',          // 图表标题颜色
						titlePosition: 'top'           // 图表标题位置: top / bottom
						
					}
			}
		},
		components:{
			Schart
		}
	}
</script>

<style lang="scss">
.chart{
	width:100%;
	height:330px;
	//padding:0 40px 0  30px;
.mesg-title{
	width:100%;
	height:50px;
	padding-top:20px;
    background-color: #ffffff;
	.datetime{
		float: left;
		width:50%;
		padding-left: 30px;
		.el-input--prefix .el-input__inner {
		height:25px;
		width:130px;
		background-color:#f0f5fb;
		border-radius: 9px;
		vertical-align: middle;
		border:none;
		padding: 0 10px;
		text-align:center;
		font-size: 13px;
		padding-right: 15px;
		}
		.el-icon-date:before {
			position: relative;
			top: -7px;
		}
	}
	.chart-picker{
		float: right;
		width:50%;
		height:27px;
		padding:0 0 0 70px;
		text-align:right;
		ul 	{
			&:before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color:#84dba7;
            position: relative;
            top: 8px;
            left: -10px;
            }
			li{
			float: left;
			list-style:none;
			color:#3366ff;
			font-size: 16px;
			height:25px;
			line-height: 14px;
			padding:0 15px;
		}

		}
		 .el-icon-more:before {
				position: relative;
				left: -50px;
				color:#333856;
			}
	}
}
	.wrapper{
		width: 100%;
		height: 300px;
	}
}
</style>


